<template>
  <div class="log">
    <div class="top">
      <div class="back" @click="$router.push({ path: $route.query.b })"></div>
    </div>
    <div class="tolog">
      <div class="image"></div>
      <h1>登录</h1>
      <div class="inp">
        <input type="text" v-model="zhanghao" placeholder="请输入账号" />
        <input type="password" v-model="mima" placeholder="请输入密码" />
      </div>
      <button @click="loging">登录</button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
export default {
  data: function () {
    return {
      zhanghao: null,
      mima: null,
    };
  },
  computed: {
    ...mapState(["loginstate"]),
  },
  watch: {
    // loginstate(n) {
    // },
  },
  methods: {
    loging() {
      this.$store.commit("tologin", [this.zhanghao, this.mima]);
      if (this.loginstate == false) {
        Toast.fail("账号密码错误");
      } else if (this.loginstate == true) {
        this.$router.push({ path: this.$route.query.f });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.log {
  .top {
    padding: 15px;
    .back {
      width: 20px;
      height: 20px;
      background-image: url("../assets/logb.png");
      background-size: 100%;
      background-position: center;
    }
  }
  .tolog {
    margin-top: 50px;
    text-align: center;
    .image {
      margin: 0 auto;
      width: 20vw;
      height: 20vw;
      background-image: url("../assets/dlt.png");
      background-size: 80%;
      background-repeat: no-repeat;
      background-position: top;
      border-radius: 50%;
      border: 5px solid #ffd129;
    }
    h1 {
      text-align: center;
      font-weight: bolder;
      color: #666;
      margin-top: 10px;
    }
    .inp {
      margin-top: 50px;
      text-align: center;
      input {
        // height: 30px;
        padding: 5px 10px;
        font-size: 20px;
        margin-bottom: 10px;
        border-style: none;
        background-color: #f1f1f1;
      }
    }
    button {
      margin-top: 20px;
      font-size: 25px;
      border: none;
      background-color: #ffd129;
      width: 80vw;
      border-radius: 50px;
      padding: 5px 0;
    }
  }
}
</style>